<template>
  <div class="main">
    <el-alert :v-loading="true" :title="bulletChat" type="success" />
    <el-row type="flex">
      <div style="width: 35vw">
        <el-carousel>
          <el-carousel-item v-for="image in product.imageList" :key="image">
            <el-image class="image" :src="'http://localhost:8082/api/comm/'+image" fit="scale-down">
              <div slot="error" class="image-slot">
                <el-empty description="暂无图片" />
              </div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

      <el-row class="content">
        <h3>{{ product.name }}</h3>
        <el-row>折旧程度：{{ product.oldLevel }}</el-row>
        <el-row>价格（元）：{{ product.price }}</el-row>
        <el-row>类型：{{ product.type }}</el-row>
        <el-row>型号：{{ product.model }}</el-row>
        <el-row>购买时间：{{ product.buyTime }}</el-row>
        <el-row>当时价格：{{ product.originPrice }}</el-row>
        <el-row>浏览次数：{{ product.viewCount }}</el-row>
        <el-row>发布时间：{{ product.createTime }}</el-row>
        <el-divider content-position="left">二手卖家信息</el-divider>
        <el-row v-if="product.userEntity!=null">姓名：{{ product.userEntity.name }}</el-row>
        <el-row v-if="product.userEntity!=null">专业：{{ product.userEntity.major }}</el-row>
        <el-row v-if="product.userEntity!=null">宿舍号：{{ product.userEntity.dormitoryNo }}</el-row>
        <el-row v-if="product.userEntity!=null&&product.userEntity.graduationTime!=null">毕业年份：{{ product.userEntity.graduationTime }}</el-row>
        <br>

      </el-row>

    </el-row>
    <el-button type="success" plain @click="addCar">加入购物车</el-button>
    <el-button type="success" plain @click="contactSeller">联系卖家</el-button>
    <br>

    <el-divider content-position="left">简介</el-divider>
    <el-row style="padding: 3%">{{ product.description }}</el-row>
    <el-divider content-position="left">评论</el-divider>
    <div style="font-size: 15px;padding: 3%">
      <div v-for=" comment in commentList">
        <span>{{ comment.userEntity!=null?comment.userEntity.name:'' }} 说： </span>
        <span>{{ comment.content }}  </span>
        <span style="float: right;">{{ comment.createTime }} </span>
        <el-divider />
      </div>
      <el-input
        v-model="inputComment"
        type="textarea"
        placeholder="请输入内容"
        maxlength="30"
        show-word-limit
      />
      <el-button type="primary" icon="el-icon-check" circle style="float: right;margin: 1%" @click="addComment" />
    </div>
  </div>
</template>

<script>

import { addComm, addMsgComm, getComm, getListComm, urlGetComm } from '@/api/comm'
import { successMsg } from '@/utils/comm'

export default {
  data() {
    return {
      id: '',
      product: {},
      recommend: {},
      resources: '',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      module: 'product',
      inputComment: '',
      commentList: [],
      bulletChat: ''
    }
  },
  created() {
    const id = this.$route.params.id
    if (id !== undefined) {
      this.id = id
      this.getData()
      this.getComment()
      var that = this
      that.getBulletChat()
      setInterval(function() {
        that.getBulletChat()
      }, 5000)
    }
  },
  methods: {
    getBulletChat() {
      urlGetComm('/log/list').then(response => {
        var data = response.data
        var item = data[Math.floor(Math.random() * data.length)]
        console.log(item)
        if (item.type === 'release') {
          this.bulletChat = item.seller + '  发布了  ' + item.productEntity.name + '  于  ' + item.createdAt
        } else {
          this.bulletChat = item.buyer + ' 买到了 ' + item.productEntity.name + '  于  ' + item.createdAt
        }
      })
    },
    getData() {
      getComm(this.module, this.id).then(rs => {
        this.product = rs.data
      })
    },
    contactSeller() {
      getComm('user', this.product.sellerId).then(rs => {
        const data = rs.data
        successMsg('卖家联系方式：' + data.phoneNumber)
      })
    },
    addCar() {
      addMsgComm('car', { 'productId': this.product.id })
    },
    addComment() {
      const data = { 'content': this.inputComment, 'productId': this.product.id }
      addComm('comment', data).then(() => {
        this.getComment()
      })
      this.inputComment = ''
    },
    getComment() {
      const data = { 'productId': this.id }
      getListComm('comment', data).then(rs => {
        this.commentList = rs.data
      })
    }
  }
}
</script>

<style scoped>

.image {
  width: 25vw;
}

.content {
  padding: 1vw;
}
.main{
  margin: 2vw;
}
@media screen and (max-width: 750px) {
  .image {
    width: 90vw;
  }

}
</style>
